<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="菜单图标" prop="MenuIcon" >
					<el-form style="margin-left: 35px;">
						<el-from-item lable="图标">
								<ElIconPicker v-model="ruleForm.MenuIcon"></ElIconPicker>
						</el-from-item>
					</el-form>	
		</el-form-item>		
			
			<el-form-item label="菜单次序" prop="MenuOrder">
				<el-input-number v-model="ruleForm.MenuOrder" :min="1" :max="10"></el-input-number>
			</el-form-item>	
			
		<el-form-item label="菜单名称" prop="MenuName">
			<el-input v-model="ruleForm.MenuName" />
		</el-form-item>
		<el-form-item label="菜单Url" prop="MenuUrl">
			<el-input v-model="ruleForm.MenuUrl" />
		</el-form-item>				
		<el-form-item label="父级菜单" prop="PId">
			<el-select v-model="ruleForm.PId" placeholder="请选择菜单">
				<el-option v-for="menu in parentMenu" :label="menu.MenuName" :value="menu.Id"></el-option>
				<el-option :value="0" label="父级" ></el-option>
			</el-select>
		</el-form-item>
				
		<el-form-item label="是否显示" prop="IsShow">
			<el-select v-model="ruleForm.IsShow" placeholder="请选择">
				 <el-option value="1" label="是">是</el-option>
				 <el-option value="0" label="否">否</el-option>
			</el-select>
		</el-form-item>		
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
	
</template>

<script setup lang="ts">
	import { reactive, ref,onMounted } from 'vue'
	import type { ComponentSize, FormInstance } from 'element-plus'
	import { ElNotification } from 'element-plus'
	import menuApi from "../../api/menuinfoapi"	
	import ElIconPicker from "../../components/Icon.vue"
	
	const emit = defineEmits(['onSave'])
	
	const icon=ref<string>('');

	interface RuleForm {
		MenuName: string
		MenuUrl: string
		MenuIcon: string
		PId: number
		IsShow: number|null
		MenuOrder: string
	}
	
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		MenuName: '',
		MenuUrl: '',
		MenuIcon: icon.value,
		PId: 0,
		IsShow: null,
		MenuOrder: '',
	})
	
	
// const optionsStatus = ref<any>([	
// ])

const parentMenu = ref<any>([])
//查询一级菜单
const getPId=()=>{
	menuApi.Menuone().then(res=>{
		parentMenu.value = res.data
		// PId.value=res.data;		
	}).catch(err=>{
		console.log(err);		
	})	
}
	
	
	const submitForm = async (formEl: FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				menuApi.post(ruleForm).then(res => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '添加成功',
							type: 'success',
							duration: 800,
							onClose: () => {
								emit("onSave", true)
							}
						})
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
	
	onMounted(()=>{
		getPId();		
	})
	
	
</script>

<style>
</style>